<template>
    <div>
        <h1>房型显示页面</h1>
    </div>
    房型名称：<input type="text" v-model="info.name">
    <!-- 房型状态：<input type="radio" v-model="info.state" :value="1">启用
    <input type="radio" v-model="info.state" :value="0">禁用 -->
    房间状态：
    <select v-model="info.state">
        <option value="">请选择</option>
        <option value="1">启用</option>
        <option value="0">停用</option>
    </select>
    <input type="button" value="查询" @click="cha">
    <input type="button" value="重置" @click="rest">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>Id</td>
                <td>房型名称</td>
                <td>房型价格</td>
                <td>房间数量</td>
                <td>状态</td>
                <td>房间号</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list" :key="item.houseId">
                <td>{{ item.houseId }}</td>
                <td>{{ item.houseName }}</td>
                <td>￥{{ item.price }}.00</td>
                <td>{{ item.numberCount }}</td>
                <td>{{ item.state == 1 ? "启用" : "停用" }}</td>
                <td>{{ item.houseNo }}</td>
                <td>
                    <input type="button" value="删除" class="btn btn-danger" @click="del(item.houseId)">
                    <input type="button" value="修改" class="btn btn-info" @click="updee(item.houseId)">
                    <input type="button" value="详情" class="btn btn-success">
                </td>
            </tr>
        </tbody>
    </table>
    <span>共{{ data.totalcount }}条</span>

    <span>每页{{ info.pagesize }}条</span>

    <span>第{{ info.pageindex }} / {{ data.totalpage }}页</span>


    <input type="button" value="首页" @click="goPage(1)">
    <input type="button" value="上一页" @click="goPage(info.pageindex - 1)">


    <input type="button" value="下一页" @click="goPage(info.pageindex + 1)">
    <input type="button" value="尾页" @click="goPage(data.totalpage)">

    <input type="number" v-model="info.pageindex">
    <input type="button" value="跳转" @click="goPage(info.pageindex)">

    <select v-model="info.pagesize" @click="cha">
        <option :value="item" v-for="item in arr">{{ item }}</option>
    </select>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();

let info: any = reactive({
    name: '',
    state: '',
    pageindex: 1,
    pagesize: 2,
})
let data: any = reactive({
    totalpage: 0,
    totalcount: 0,
    list: [],
})
let arr: any = ref([2, 4, 6, 8]);
onMounted(() => {
    show();
})
//显示
const show = () => {
    axios({
        url: 'https://localhost:7107/api/Hosue/GetHouse',
        method: 'get',
        params: info,
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data);
        })
}
//分页
const goPage = (num: any) => {
    if (num < 1) {
        info.pageindex = 1
        return;
    }
    if (num > data.totalpage) {
        info.pageindex = data.totalpage;
        return;
    }

    info.pageindex = num;
    show();
}
const cha = () => {
    info.pageindex = 1;
    show();
}
//重置
const rest = () => {
    info.name = "";
    info.state = '';
}
const del = (id: any) => {
    let f = confirm("确认删除吗？")
    if (f) {
        axios({
            url: 'https://localhost:7107/api/Hosue/Del',
            method: 'delete',
            params: {
                ids: id,
            }
        })
            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert("删除成功");
                    show();
                    return;
                }
                else {
                    alert("删除失败");
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
}

//修改
const updee = (id: any) => {
    router.push({
        path: '/houseUpdate',
        query: {
            id: id,
        }
    })
}
</script>

<style scoped></style>